<template>
	<view class="custom-cancel">
		<!-- 取消原因 -->
		<basic-bottom-popover v-model="showCancelPopover" title="选择取消原因">
			<picker-view 
				indicator-class="selector-indicator" 
				class="selector"
				v-model="cancelReasonIndex"
				@change="onReasonChange">
				<picker-view-column>
					<view v-for="(item, index) in cancelReasons" :key="index" class="selector-item">{{item}}</view>
				</picker-view-column>
			</picker-view>

			<view class="popover-btn-wrapper">
				<basic-button type="plain" border width="304rpx" heght="72rpx" @click="showCancelPopover=false">取消</basic-button>
				<basic-button width="304rpx" heght="72rpx" @click="confirmCancel">确定</basic-button>
			</view>

			<basic-safe-area></basic-safe-area>
		</basic-bottom-popover>
	</view>
</template>
<script>
import sdk from 'sdk'
import { canelCustomOrder} from 'api'
import modal from 'utils/helper/modal'
export default {
	name: 'custom-cancel',
	props: {
		orderId: {
			type: [String, Number]
		}
	},
	data(){
		return {
			showCancelPopover: false,
			cancelReasons: ['误提交订单', '无人联系', '暂时不想出游', '信息填写错误', '定制方案和服务不满意'],
			cancelReasonIndex: [0]
		}
	},
	methods:{
		show(){
			this.showCancelPopover = true
		},
		close(){
			this.showCancelPopover = false
		},
		confirmCancel(){
			this.showCancelPopover = false
			let that = this
			sdk.showLoading({mask: true})
			
			canelCustomOrder({
				id: this.orderId,
				statusRemark: this.cancelReasons[this.cancelReasonIndex[0]]
			}).then(res => {
				modal.toast('取消成功', () => {
					this.$emit('refreshOrder')
				})
			}).catch(_ => {
				sdk.showToast({
				icon: 'none',
				title: '取消失败'
				})
			})
		},
		onReasonChange(e) {
			this.cancelReasonIndex = e.detail.value
		}
	}
}
</script>
<style lang="less">
@selector__row_height: 80rpx;
@selector_height: 442rpx;

/deep/ .selector {
	width: 100%;
	height: @selector_height;
}

/deep/ .selector-item {
	height: @selector__row_height;
	line-height: @selector__row_height;
	text-align: center;
}

/deep/ .selector-indicator {
	height: @selector__row_height;
}

.popover-btn-wrapper {
	.flex;
	.flex-middle;
	.flex-between;

	padding: 0 30rpx;
	height: 130rpx;
	border-top: 1rpx solid @border_color;
}
</style>